revision:
<div class="panel">
<div>Size: [<span>100px</span>] <input type="range" min="20" max="200" step="10" value="100" name="s"></div>
<div>Ratio: [<span>1</span>] <input type="range" min="0" max="2" step="0.05" value="1" name="r"></div>
<div>Spacing: [<span>4px</span>]<input type="range" min="0" max="10" step="1" value="4" name="mv"></div>
<div>Clip-path<br>
hc: [<span>0.25</span>]<input type="range" min="0" max=".5" step=".05" value=".25" name="h"><br>
vc: [<span>0.35</span>]<input type="range" min="0" max=".5" step=".05" value=".35" name="v">
</div>
</div>
<div class="main-3">
<div class="container-3">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<style>
.main-3 {display:flex; --s: 100px; --r: 1; --h: 0.25; --v: 0.35; --hc:calc(clamp(0,var(--h),0.5) * var(--s)) ; --vc:calc(clamp(0,var(--v),0.5) * var(--s) * var(--r)); --mv: 4px; --mh: calc(var(--mv) + (var(--s) - 2*var(--hc))/2);
--f: calc(2*var(--s)*var(--r) + 4*var(--mv) - 2*var(--vc) - 2px);margin-top: 2vw; margin-bottom:3vw;}
.container-3 {font-size: 0; }
.container-3 div {width: var(--s); margin: var(--mv) var(--mh); height: calc(var(--s)*var(--r)); display: inline-block; font-size:initial; clip-path: polygon(var(--hc) 0, calc(100% - var(--hc)) 0,100% var(--vc),
100% calc(100% - var(--vc)), calc(100% - var(--hc)) 100%,var(--hc) 100%,0 calc(100% - var(--vc)),0 var(--vc)); background: navy; margin-bottom: calc(var(--mv) - var(--vc)); }
.container-3 div:nth-child(odd) {background:yellow;}
.container-3::before {content: ""; width: calc(var(--s)/2 + var(--mh)); float: left; height: 135%; shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 2px), #000 0 var(--f));}
.panel {position: relative;width: 20vw;top: 2vw; left: 2vw;padding: 1vw;border: 0.1vw solid;border-radius: 1vw;background: skyblue; font-family: Helvetica, sans-serif;opacity: .5; }
.panel:hover {opacity:1}
.panel > div:not(:last-child) {border-bottom: 0.1vw solid;padding-bottom: 1vw;margin-bottom: 1vw;}
*,*::before {transition:0.5s linear}
</style>
<script>
let inputs = document.querySelectorAll('input[type=range]')
let elem = document.querySelector('.main-3')
inputs.forEach(input => {
input.addEventListener('change', function(e) {
var p = e.target.getAttribute('name');
if(p=="s" || p=="mv") {
elem.style.setProperty("--"+p, this.value+"px");
e.target.previousElementSibling.innerHTML = this.value+"px";
} else {
elem.style.setProperty("--"+p, this.value);
e.target.previousElementSibling.innerHTML = this.value;
}
});
});
</script>
<div class="panel-4">
<div>Size: [<span>100px</span>] <input type="range" min="20" max="200" step="10" value="100" name="s"></div>
<div>Ratio: [<span>1</span>] <input type="range" min="0" max="2" step="0.05" value="1" name="r"></div>
<div>Spacing: [<span>4px</span>]<input type="range" min="0" max="10" step="1" value="4" name="mv"></div>
<div>Clip-path<br>
hc: [<span>0.25</span>]<input type="range" min="0" max=".5" step=".05" value=".25" name="h"><br>
vc: [<span>0.35</span>]<input type="range" min="0" max=".5" step=".05" value=".35" name="v">
</div>
</div>
<div class="main-4">
<div class="container-4">
<i></i>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<style>
.panel-4 {position: relative; width: 20vw; top: 2vw;left: 2vw;padding: 0.5vw;border: 0.1vw solid;border-radius: 1vw; background: aqua; font-family: Helvetica, sans-serif;opacity:.5}
.panel-4:hover {opacity:1}
.panel-4 > div:not(:last-child) {border-bottom: 0.1vw solid;padding-bottom: 0.5vw;margin-bottom: 0.2vw;}
*,*::before {transition:0.5s linear}
.main-4 {display:flex;--s: 7vw; --r: 1; --h: 0.25; --v: 0.35; --hc:calc(clamp(0,var(--h),0.5) * var(--s)) ; --vc:calc(clamp(0,var(--v),0.5) * var(--s) * var(--r)); --mv: 0.2vw; --mh: calc(var(--mv) + (var(--s)
- 2*var(--hc))/2); --f: calc(2*var(--s)*var(--r) + 4*var(--mv) - 2*var(--vc) - 2px);--nr:5;}
.container-4 {font-size: 0; max-width:calc(var(--nr)*(var(--s) + 2*var(--mh))); margin:0 auto; text-align:center;}
.container-4 div {width: var(--s); margin: var(--mv) var(--mh); height: calc(var(--s)*var(--r)); display: inline-block; font-size:initial; clip-path: polygon(var(--hc) 0, calc(100% - var(--hc)) 0,
100% var(--vc),100% calc(100% - var(--vc)), calc(100% - var(--hc)) 100%,var(--hc) 100%, 0 calc(100% - var(--vc)),0 var(--vc)); background: saddlebrown; margin-bottom: calc(var(--mv) - var(--vc)); }
.container-4 div:nth-child(odd) {background:indigo;}
.container-4::before , .container-4 i{ content: ""; width: calc(50% - var(--mh) - var(--s)/2); float: left; height: calc(var(--f)*(var(--nr) - 1)/2); shape-outside: linear-gradient(to bottom right,#000 49%,#0000 0);}
.container-4 i {float:right;shape-outside: linear-gradient(to bottom left,#000 49%,#0000 0);}
</style>
<script>
let inputs_4 = document.querySelectorAll('.panel-4 div input[type=range]')
let elem_4 = document.querySelector('.main-4')
inputs_4.forEach(input_4 => {
input_4.addEventListener('change', function(e) {
var p = e.target.getAttribute('name');
if(p=="s" || p=="mv") {
elem_4.style.setProperty("--"+p, this.value+"px");
e.target.previousElementSibling.innerHTML = this.value+"px";
} else {
elem_4.style.setProperty("--"+p, this.value);
e.target.previousElementSibling.innerHTML = this.value;
}
});
});
</script>